<template>
  <div class="task-associations-tab">
    <el-tabs v-model="activeSubTab" type="border-card" class="association-sub-tabs">
      <!-- 关联需求子页签 -->
      <el-tab-pane label="关联需求" name="requirements">
        <div class="sub-tab-content">
          <div class="tab-header">
            <div class="header-info">
              <span class="item-count">关联需求（{{ relatedRequirements.length }}）</span>
            </div>
            <div class="header-actions">
              <el-button
                type="primary"
                size="small"
                @click="handleAddRequirement"
              >
                <el-icon><Plus /></el-icon>
                添加需求
              </el-button>
            </div>
          </div>

          <div v-loading="requirementsLoading" class="items-list">
            <el-table
              v-if="relatedRequirements.length > 0"
              :data="relatedRequirements"
              size="default"
              border
              stripe
              style="width: 100%"
            >
              <el-table-column prop="title" label="需求标题" min-width="200" show-overflow-tooltip>
                <template #default="{ row }">
                  <el-link 
                    type="primary" 
                    @click="handleViewRequirement(row.id)"
                    :underline="false"
                  >
                    {{ row.title }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag 
                    :type="getStatusType(row.status)" 
                    size="small"
                  >
                    {{ getStatusName(row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="priority" label="优先级" width="90">
                <template #default="{ row }">
                  <el-tag 
                    :type="getPriorityType(row.priority)" 
                    size="small"
                  >
                    {{ getPriorityName(row.priority) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="requirement_type" label="类型" width="100">
                <template #default="{ row }">
                  <el-tag size="small" type="info">
                    {{ getTypeName(row.requirement_type) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="负责人" width="150" show-overflow-tooltip>
                <template #default="{ row }">
                  <UserDisplay
                    :user-id="row.assignee_id"
                    :user-name="row.assignee_name"
                    :show-avatar="true"
                    size="small"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="created_at" label="创建时间" width="160">
                <template #default="{ row }">
                  {{ formatDate(row.created_at) || '—' }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180" fixed="right">
                <template #default="{ row }">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleViewRequirement(row.id)"
                  >
                    查看
                  </el-button>
                  <el-button
                    link
                    type="danger"
                    size="small"
                    @click="handleRemoveRequirement(row)"
                  >
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-empty v-else description="暂无关联需求" :image-size="80" />
          </div>
        </div>
      </el-tab-pane>

      <!-- 关联缺陷子页签 -->
      <el-tab-pane label="关联缺陷" name="defects">
        <div class="sub-tab-content">
          <div class="tab-header">
            <div class="header-info">
              <span class="item-count">关联缺陷（{{ relatedDefects.length }}）</span>
            </div>
            <div class="header-actions">
              <el-button
                type="primary"
                size="small"
                @click="handleAddDefect"
              >
                <el-icon><Plus /></el-icon>
                添加缺陷
              </el-button>
            </div>
          </div>

          <div v-loading="defectsLoading" class="items-list">
            <el-table
              v-if="relatedDefects.length > 0"
              :data="relatedDefects"
              size="default"
              border
              stripe
              style="width: 100%"
            >
              <el-table-column prop="title" label="缺陷标题" min-width="200" show-overflow-tooltip>
                <template #default="{ row }">
                  <el-link 
                    type="primary" 
                    @click="handleViewDefect(row.id)"
                    :underline="false"
                  >
                    {{ row.title }}
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag 
                    :type="getDefectStatusType(row.status)" 
                    size="small"
                  >
                    {{ getDefectStatusName(row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="severity" label="严重程度" width="100">
                <template #default="{ row }">
                  <el-tag 
                    :type="getSeverityType(row.severity)" 
                    size="small"
                  >
                    {{ getSeverityName(row.severity) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="priority" label="优先级" width="90">
                <template #default="{ row }">
                  <el-tag 
                    :type="getDefectPriorityType(row.priority)" 
                    size="small"
                  >
                    {{ getDefectPriorityName(row.priority) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="assignee_name" label="负责人" width="100" show-overflow-tooltip />
              <el-table-column prop="created_at" label="创建时间" width="160">
                <template #default="{ row }">
                  {{ formatDate(row.created_at) || '—' }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180" fixed="right">
                <template #default="{ row }">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleViewDefect(row.id)"
                  >
                    查看
                  </el-button>
                  <el-button
                    link
                    type="danger"
                    size="small"
                    @click="handleRemoveDefect(row)"
                  >
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-empty v-else description="暂无关联缺陷" :image-size="80" />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 需求选择对话框 -->
    <RequirementSelectorDialog
      v-model="requirementSelectorVisible"
      :project-id="projectId"
      @confirm="handleRequirementSelected"
    />

    <!-- 缺陷选择对话框 -->
    <DefectSelectorDialog
      v-model="defectSelectorVisible"
      :project-id="projectId"
      @confirm="handleDefectSelected"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import type { RequirementResponse } from '@/api/requirements'
import type { Defect } from '@/api/defect'
import { formatDate } from '@/utils/date'
import { versionAPI, RelationType } from '@/api/version'
import { taskAPI } from '@/api/task'
import { ResponseParser } from '@/utils/responseParser'
import { useRequirementStates } from '@/composables/useRequirementStates'
import { useRequirementOptions } from '@/composables/useRequirementOptions'
import { useDefectStates } from '@/composables/useDefectStates'
import { useDefectOptions } from '@/composables/useDefectOptions'
import UserDisplay from '@/components/ui/UserDisplay.vue'
import RequirementSelectorDialog from '@/components/version/RequirementSelectorDialog.vue'
import DefectSelectorDialog from '@/components/version/DefectSelectorDialog.vue'

interface Props {
  taskId: string
  projectId?: string
  versionIds?: string[]
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (event: 'requirement-updated'): void
  (event: 'defect-updated'): void
}>()

const router = useRouter()
const activeSubTab = ref('requirements')
const requirementsLoading = ref(false)
const defectsLoading = ref(false)
const relatedRequirements = ref<RequirementResponse[]>([])
const relatedDefects = ref<Defect[]>([])
const requirementSelectorVisible = ref(false)
const defectSelectorVisible = ref(false)

const { getStateName, getStateColor, loadStates: loadRequirementStates } = useRequirementStates()
const { getPriorityName: getPriorityNameFromOptions, getTypeName: getTypeNameFromOptions, loadOptions: loadRequirementOptions } = useRequirementOptions()

const { getStateName: getDefectStateName, getStateColor: getDefectStateColor, loadStates: loadDefectStates } = useDefectStates()
const { getSeverityName: getSeverityNameFromOptions, getPriorityName: getDefectPriorityNameFromOptions, loadOptions: loadDefectOptions } = useDefectOptions()

// 需求相关方法
const getStatusName = (status?: string) => {
  if (!status) return '未知'
  return getStateName(status)
}

const getStatusType = (status?: string) => {
  if (!status) return 'info'
  const color = getStateColor(status)
  if (color.includes('green') || color.includes('success')) return 'success'
  if (color.includes('red') || color.includes('danger')) return 'danger'
  if (color.includes('orange') || color.includes('warning')) return 'warning'
  return 'info'
}

const getPriorityName = (priority?: string) => {
  if (!priority) return '未知'
  return getPriorityNameFromOptions(priority)
}

const getPriorityType = (priority?: string) => {
  if (!priority) return 'info'
  const code = priority.toLowerCase()
  if (code === 'high' || code === 'urgent') return 'danger'
  if (code === 'medium') return 'warning'
  return 'info'
}

const getTypeName = (type?: string) => {
  if (!type) return '未知'
  return getTypeNameFromOptions(type)
}

// 缺陷相关方法
const getDefectStatusName = (status?: string) => {
  if (!status) return '未知'
  return getDefectStateName(status)
}

const getDefectStatusType = (status?: string) => {
  if (!status) return 'info'
  const color = getDefectStateColor(status)
  if (color.includes('green') || color.includes('success')) return 'success'
  if (color.includes('red') || color.includes('danger')) return 'danger'
  if (color.includes('orange') || color.includes('warning')) return 'warning'
  return 'info'
}

const getSeverityName = (severity?: string) => {
  if (!severity) return '未知'
  return getSeverityNameFromOptions(severity)
}

const getSeverityType = (severity?: string) => {
  if (!severity) return 'info'
  const code = severity.toLowerCase()
  if (code === 'critical' || code === 'urgent' || code === 'blocker') return 'danger'
  if (code === 'important' || code === 'major') return 'warning'
  return 'info'
}

const getDefectPriorityName = (priority?: string) => {
  if (!priority) return '未知'
  return getDefectPriorityNameFromOptions(priority)
}

const getDefectPriorityType = (priority?: string) => {
  if (!priority) return 'info'
  const code = priority.toLowerCase()
  if (code === 'critical' || code === 'urgent' || code === 'blocker') return 'danger'
  if (code === 'high') return 'warning'
  if (code === 'medium') return 'success'
  return 'info'
}

// 加载关联需求
const fetchRelatedRequirements = async () => {
  if (!props.taskId) {
    console.log('[TaskAssociationsTab] taskId 为空，跳过加载关联需求')
    relatedRequirements.value = []
    return
  }

  console.log('[TaskAssociationsTab] 开始加载关联需求, taskId:', props.taskId, 'versionIds:', props.versionIds)
  requirementsLoading.value = true
  try {
    const allRequirements: RequirementResponse[] = []
    
    // 通过版本任务关联表查询关联的需求（与缺陷逻辑一致，只调用一个接口）
    if (props.versionIds && props.versionIds.length > 0) {
      for (const versionId of props.versionIds) {
        try {
          const response: any = await versionAPI.getVersionTasks(versionId, { skip: 0, limit: 100 })
          let taskRelations: any[] = []
          
          // 处理响应数据格式
          if (response && response.data) {
            const data = response.data
            if (Array.isArray(data)) {
              taskRelations = data
            } else if (data.success && data.data) {
              if (Array.isArray(data.data)) {
                taskRelations = data.data
              } else if (data.data.items && Array.isArray(data.data.items)) {
                taskRelations = data.data.items
              }
            } else if (data.items && Array.isArray(data.items)) {
              taskRelations = data.items
            }
          } else if (Array.isArray(response)) {
            taskRelations = response
          }
          
          // 过滤出关联了当前任务且有需求ID的任务关联
          const taskRelatedRequirements = taskRelations
            .filter((relation: any) => {
              return relation.task_id === props.taskId && relation.requirement_id
            })
            .map((relation: any) => {
              // 构造需求对象（从任务关联中提取需求信息）
              return {
                id: relation.requirement_id,
                title: relation.requirement_title || '未命名需求',
                status: relation.requirement_status || '',
                priority: relation.requirement_priority || '',
                requirement_type: relation.requirement_type || '',
                assignee_id: relation.requirement_assignee_id || null,
                assignee_name: relation.requirement_assignee_name || null,
                project_id: relation.requirement_project_id || null,
                created_at: relation.requirement_created_at || null,
              } as RequirementResponse
            })
          
          allRequirements.push(...taskRelatedRequirements)
        } catch (error) {
          console.error(`获取版本 ${versionId} 的任务关联失败:`, error)
        }
      }
    }
    
    // 去重
    const uniqueRequirements = Array.from(new Map(allRequirements.map(req => [req.id, req])).values())
    relatedRequirements.value = uniqueRequirements
    console.log('[TaskAssociationsTab] 关联需求加载完成，数量:', uniqueRequirements.length, uniqueRequirements)
  } catch (error) {
    console.error('[TaskAssociationsTab] 获取关联需求失败:', error)
    ElMessage.error('获取关联需求失败')
    relatedRequirements.value = []
  } finally {
    requirementsLoading.value = false
  }
}

// 加载关联缺陷
const fetchRelatedDefects = async () => {
  if (!props.taskId) {
    relatedDefects.value = []
    return
  }

  defectsLoading.value = true
  try {
    const allDefects: Defect[] = []
    
    // 通过版本ID查询关联的缺陷
    if (props.versionIds && props.versionIds.length > 0) {
      for (const versionId of props.versionIds) {
        try {
          const response: any = await versionAPI.getVersionDefects(versionId, { skip: 0, limit: 100 })
          let defects: Defect[] = []
          
          if (response && response.data) {
            const data = response.data
            if (Array.isArray(data)) {
              defects = data.map((item: any) => item.defect || item).filter(Boolean)
            } else if (data.success && data.data) {
              if (Array.isArray(data.data)) {
                defects = data.data.map((item: any) => item.defect || item).filter(Boolean)
              } else if (data.data.items && Array.isArray(data.data.items)) {
                defects = data.data.items.map((item: any) => item.defect || item).filter(Boolean)
              }
            } else if (data.items && Array.isArray(data.items)) {
              defects = data.items.map((item: any) => item.defect || item).filter(Boolean)
            }
          }
          
          // 过滤出关联了当前任务的缺陷
          const taskRelatedDefects = defects.filter((defect: any) => {
            return defect.task_id === props.taskId || 
                   (defect.relation && defect.relation.task_id === props.taskId)
          })
          
          allDefects.push(...taskRelatedDefects)
        } catch (error) {
          console.error(`获取版本 ${versionId} 的缺陷失败:`, error)
        }
      }
    }
    
    // 去重
    const uniqueDefects = Array.from(new Map(allDefects.map(defect => [defect.id, defect])).values())
    relatedDefects.value = uniqueDefects
  } catch (error) {
    console.error('获取关联缺陷失败:', error)
    ElMessage.error('获取关联缺陷失败')
    relatedDefects.value = []
  } finally {
    defectsLoading.value = false
  }
}

// 添加需求
const handleAddRequirement = () => {
  requirementSelectorVisible.value = true
}

// 处理需求选择
const handleRequirementSelected = async (requirements: RequirementResponse[]) => {
  if (!requirements.length || !props.taskId) return

  try {
    requirementsLoading.value = true
    
    const requirementIds = requirements.map(r => r.id)
    
    // 方式1: 直接更新任务的 requirement_id（如果只有一个需求）
    if (requirementIds.length === 1) {
      try {
        await taskAPI.updateTask(props.taskId, { requirement_id: requirementIds[0] })
        ElMessage.success('需求关联成功')
      } catch (error) {
        console.error('更新任务需求关联失败:', error)
        if (props.versionIds && props.versionIds.length > 0) {
          await associateRequirementsViaVersion(requirementIds)
        } else {
          ElMessage.error('关联需求失败，请先关联版本')
          return
        }
      }
    } else {
      // 多个需求，通过版本关联
      if (props.versionIds && props.versionIds.length > 0) {
        await associateRequirementsViaVersion(requirementIds)
      } else {
        ElMessage.warning('多个需求需要先关联版本')
        try {
          await taskAPI.updateTask(props.taskId, { requirement_id: requirementIds[0] })
          ElMessage.success('已关联第一个需求到任务')
        } catch (error) {
          console.error('更新任务需求关联失败:', error)
          ElMessage.error('关联需求失败，请先关联版本')
          return
        }
      }
    }
    
    await fetchRelatedRequirements()
    emit('requirement-updated')
  } catch (error) {
    console.error('关联需求失败:', error)
    ElMessage.error('关联需求失败')
  } finally {
    requirementsLoading.value = false
  }
}

// 通过版本关联需求
const associateRequirementsViaVersion = async (requirementIds: string[]) => {
  if (!props.versionIds || props.versionIds.length === 0) return
  
  let successCount = 0
  let alreadyAssociatedCount = 0
  const errors: string[] = []
  
  const associatePromises = props.versionIds.map(versionId =>
    Promise.all(
      requirementIds.map(async (requirementId) => {
        try {
          await versionAPI.addTaskToVersion(versionId, {
            task_id: props.taskId,
            requirement_id: requirementId,
            relation_type: RelationType.INCLUDED
          })
          successCount++
          return { success: true }
        } catch (error: any) {
          const errorMessage = ResponseParser.extractMessage(error) || error?.response?.data?.message || error?.message || '关联失败'
          // 检查是否是"已关联"的错误
          if (errorMessage.includes('already associated') || 
              errorMessage.includes('已经关联') || 
              errorMessage.includes('已关联') ||
              errorMessage.includes('无需重复')) {
            alreadyAssociatedCount++
            return { success: false, alreadyAssociated: true }
          } else {
            errors.push(errorMessage)
            console.error(`关联需求 ${requirementId} 到版本 ${versionId} 失败:`, error)
            return { success: false, alreadyAssociated: false }
          }
        }
      })
    )
  )
  
  await Promise.all(associatePromises)
  
  // 根据结果显示不同的提示
  if (errors.length > 0) {
    ElMessage.error(errors[0] || '关联失败')
  } else if (alreadyAssociatedCount > 0 && successCount === 0) {
    ElMessage.warning('该任务已关联到所选版本，无需重复关联')
  } else if (successCount > 0 && alreadyAssociatedCount > 0) {
    ElMessage.warning(`部分需求已关联，成功关联 ${successCount} 个需求`)
  } else if (successCount > 0) {
    ElMessage.success('需求关联成功')
  }
}

const handleViewRequirement = (requirementId: string) => {
  router.push(`/requirements/${requirementId}`)
}

const handleRemoveRequirement = async (requirement: RequirementResponse) => {
  try {
    await ElMessageBox.confirm(
      `确定要移除需求"${requirement.title}"的关联吗？`,
      '确认移除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    requirementsLoading.value = true

    // 方式1: 如果任务的 requirement_id 就是当前需求，清空它
    try {
      const taskResponse = await taskAPI.getTask(props.taskId)
      const task = taskResponse?.data || taskResponse
      if (task && task.requirement_id === requirement.id) {
        await taskAPI.updateTask(props.taskId, { requirement_id: null })
        ElMessage.success('需求关联已移除')
        await fetchRelatedRequirements()
        emit('requirement-updated')
        return
      }
    } catch (error) {
      console.error('检查任务关联失败:', error)
    }

    // 方式2: 如果有版本ID，从版本关联中移除
    if (props.versionIds && props.versionIds.length > 0) {
      const removePromises = props.versionIds.map(versionId =>
        versionAPI.removeTaskFromVersion(versionId, props.taskId).catch(error => {
          console.error(`从版本 ${versionId} 移除任务关联失败:`, error)
          return null
        })
      )
      await Promise.all(removePromises)
      ElMessage.success('需求关联已移除')
    } else {
      ElMessage.success('需求关联已移除')
    }

    await fetchRelatedRequirements()
    emit('requirement-updated')
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('移除需求关联失败:', error)
      ElMessage.error('移除需求关联失败')
    }
  } finally {
    requirementsLoading.value = false
  }
}

// 添加缺陷
const handleAddDefect = () => {
  defectSelectorVisible.value = true
}

// 处理缺陷选择
const handleDefectSelected = async (defects: Defect[]) => {
  if (!defects.length || !props.taskId) return

  try {
    defectsLoading.value = true
    
    // 通过版本关联缺陷
    if (props.versionIds && props.versionIds.length > 0) {
      const associatePromises = props.versionIds.map(versionId =>
        Promise.all(
          defects.map(defect =>
            versionAPI.addDefectAssociation(versionId, defect.id).catch(error => {
              console.error(`关联缺陷 ${defect.id} 到版本 ${versionId} 失败:`, error)
              return null
            })
          )
        )
      )
      await Promise.all(associatePromises)
      ElMessage.success('缺陷关联成功')
    } else {
      ElMessage.warning('请先关联版本')
      return
    }
    
    await fetchRelatedDefects()
    emit('defect-updated')
  } catch (error) {
    console.error('关联缺陷失败:', error)
    ElMessage.error('关联缺陷失败')
  } finally {
    defectsLoading.value = false
  }
}

const handleViewDefect = (defectId: string) => {
  router.push(`/defects/${defectId}`)
}

const handleRemoveDefect = async (defect: Defect) => {
  try {
    await ElMessageBox.confirm(
      `确定要移除缺陷"${defect.title}"的关联吗？`,
      '确认移除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    defectsLoading.value = true

    // 如果有版本ID，从版本关联中移除
    if (props.versionIds && props.versionIds.length > 0) {
      const removePromises = props.versionIds.map(versionId =>
        versionAPI.removeDefectFromVersion(versionId, defect.id).catch(error => {
          console.error(`从版本 ${versionId} 移除缺陷失败:`, error)
          return null
        })
      )
      await Promise.all(removePromises)
    }

    ElMessage.success('缺陷关联已移除')
    await fetchRelatedDefects()
    emit('defect-updated')
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('移除缺陷关联失败:', error)
      ElMessage.error('移除缺陷关联失败')
    }
  } finally {
    defectsLoading.value = false
  }
}

// 监听子标签页切换，加载对应的数据
watch(() => activeSubTab.value, (tab) => {
  if (!props.taskId) return
  if (tab === 'requirements') {
    fetchRelatedRequirements()
  } else if (tab === 'defects') {
    fetchRelatedDefects()
  }
})

watch(() => [props.taskId, props.versionIds, props.projectId], ([newTaskId]) => {
  if (!newTaskId) {
    console.log('[TaskAssociationsTab] taskId 变为空，清空列表')
    relatedRequirements.value = []
    relatedDefects.value = []
    return
  }
  console.log('[TaskAssociationsTab] taskId 或 versionIds 变化，重新加载数据, taskId:', newTaskId, 'activeSubTab:', activeSubTab.value)
  // 当 taskId 变化时，加载对应标签页的数据
  if (activeSubTab.value === 'requirements') {
    fetchRelatedRequirements()
  } else if (activeSubTab.value === 'defects') {
    fetchRelatedDefects()
  }
}, { immediate: true, deep: true })

onMounted(async () => {
  console.log('[TaskAssociationsTab] 组件已挂载, taskId:', props.taskId, 'activeSubTab:', activeSubTab.value)
  // 加载选项数据
  await Promise.all([
    loadRequirementStates(),
    loadRequirementOptions(),
    loadDefectStates(),
    loadDefectOptions()
  ])
  // 默认加载需求列表（确保 taskId 存在）
  if (props.taskId) {
    if (activeSubTab.value === 'requirements') {
      await fetchRelatedRequirements()
    } else if (activeSubTab.value === 'defects') {
      await fetchRelatedDefects()
    }
  } else {
    console.warn('[TaskAssociationsTab] 组件挂载时 taskId 为空，无法加载数据')
  }
})

// 暴露刷新方法供父组件调用
defineExpose({
  refreshRequirements: fetchRelatedRequirements,
  refreshDefects: fetchRelatedDefects
})
</script>

<style scoped lang="scss">
.task-associations-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.association-sub-tabs {
  :deep(.el-tabs__header) {
    margin: 0;
  }

  :deep(.el-tabs__content) {
    padding: 0;
  }
}

.sub-tab-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.header-info {
  .item-count {
    font-size: 15px;
    font-weight: 600;
    color: #303133;
  }
}

.header-actions {
  display: flex;
  gap: 8px;
}

.items-list {
  min-height: 200px;
}
</style>

